<template>
  <div class="fileContent">
    <div class="table-page-search-wrapper">
      <a-form layout="horizontal">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="文件名称">
              <a-input
                v-model:value="queryParam.resourceName"
                placeholder=""
              />
            </a-form-item>
          </a-col>
          <a-col :md="(!advanced && 8) || 24" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="
                (advanced && { float: 'right', overflow: 'hidden' }) || {}
              "
            >
              <a-button type="primary" @click="initData">查询</a-button>
              <a-button style="margin-left: 8px" @click="reloadQuery"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <el-scrollbar height="calc(100vh - 240px)" style="" class="mylist">
    

      <div class="table-operator">
        <div class="header">
          <a-breadcrumb>
            <a-breadcrumb-item v-for="(item, index) in parentList" :key="index">
              <a href="">
                <span @click.prevent="linkTo(item)" class="">
                  {{ item.parentName }}
                </span>
              </a>
            </a-breadcrumb-item>
          </a-breadcrumb>
          <!-- <div class="buttonList">
            <Upload
              @refreshUploadList="refreshUploadList"
              :parentId="queryParam.parentId"
            />
          </div> -->
        </div>
        <div v-if="fileList.length > 0">
          <FileList
            :fileList="fileList"
            @refreshData="refreshUploadList"
            @openFolder="openFolder"
          >
          </FileList>
        </div>
        <a-empty v-else>
          <template #description>
            <span> 暂无数据 </span>
          </template>
        </a-empty>
      </div>
      <!-- <CreateForm ref="createModal" :visible="visible" :loading="confirmLoading" :model="formeData"
          :selectAree="selectAree" @cancel="handleCancel" @refreshData="refreshUploadList" /> -->
    </el-scrollbar>
  </div>
</template>
  
  <script setup>
import { ref, reactive, onMounted } from "vue";
import { pick } from "lodash";
import http from "@/request";
//   import CreateForm from './edit.vue'
import FileList from "./fileList.vue";

onMounted(async () => {
  initData();
  const initObj = pick(queryParam, ["parentId", "parentName"]);
  parentChange(initObj);
});

const selectKeys = [
  { key: "1", value: "文件夹" },
  { key: "2", value: "图片" },
  { key: "3", value: "文档" },
  { key: "4", value: "视频" },
  { key: "5", value: "音频" },
  { key: "6", value: "其他" },
];

const visible = ref(false);
const confirmLoading = ref(false);
const formeData = ref(null);
const advanced = ref(false);
const queryParam = reactive({
  parentId: "-1",
  parentName: "根目录",
  resourceType: "",
  resourceName: "",
});
const parentList = ref([]);
const selectedRowKeys = ref([]);
const selectedRows = ref([]);
const selectAree = ref([]);
const fileList = ref([]);

const initParam = () => {
  const { type, content } = queryParam;
  const queryObj = {
    ...queryParam,
    [type]: content ? content : null,
  };
  return queryObj;
};

const initData = (oldParentData = null) => {
  const requestData =
    queryParam.parentId != -1
      ? { parentId: queryParam.parentId, search: queryParam.resourceName }
      : { search: queryParam.resourceName };
  http.post("/resource/listResource", requestData).then((res) => {
    if (res.data.code == 200) {
      fileList.value = res.data.data.list;
      if (oldParentData) {
        parentChange(oldParentData);
      }
    }
  });
};

const parentChange = (data) => {
  console.log(data, "parentList");
  if (data.parentId) {
    parentList.value.push(data);
  }
};

const linkTo = (data) => {
  queryParam.parentId = data.parentId;
  queryParam.parentName = data.parentName;
  initData();
  const index = parentList.value.findIndex(
    (item) => item.parentId === data.parentId
  );
  parentList.value.splice(index + 1, parentList.value.length - index);
};

const reloadQuery = () => {
  queryParam.resourceType = "";
  queryParam.resourceName = "";
};

const refreshUploadList = () => {
  initData();
};

const handleAdd = () => {
  formeData.value = {
    parentId: queryParam.parentId,
  };
  visible.value = true;
};

const handleCancel = () => {
  visible.value = false;
  const form = refs.createModal.form;
  form.resetFields(); // 清理表单数据（可不做）
};

const openFolder = (data) => {
  queryParam.parentId = data.id;
  queryParam.parentName = data.resourceName;
  const folderObj = pick(queryParam, ["parentId", "parentName"]);
  initData(folderObj);
};

const onSelectChange = (selectedRowKeys, selectedRows) => {
  selectedRowKeys.value = selectedRowKeys;
  selectedRows.value = selectedRows;
};
</script>
  
  <style scoped lang="scss">
.fileContent {
  min-height: calc(100vh - 190px);
  .ant-card {
    background: #f5f5f5;
  }
  .mylist {
    :deep .el-scrollbar__bar.is-horizontal {
      display: none;
    }
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.buttonList {
  display: flex;
}
.table-page-search-wrapper {
  width: 70%;
}
</style>
  